<template>
    <div class="box">
        <div class="main">
            <div class="content">

            </div>
            <div class="message">
                <el-input
                    v-model="input"
                    :rows="7"
                    type="textarea"
                    clearable>
                </el-input>
                <button>发送</button>
            </div>
        </div>
    </div>
</template>

<script>
const ws = new WebSocket('ws://localhost:8080/chat')
export default {
  data () {
    return {
      input: ''
    }
  },
  mounted () {
    ws.addEventListener('open', this.Open.bind(this), false)
    ws.addEventListener('close', this.Close.bind(this), false)
    ws.addEventListener('error', this.Error.bind(this), false)
    ws.addEventListener('message', this.Message.bind(this), false)
  },
  methods: {
    Open (e) {
      console.log('open', e)
    },
    Close (e) {
      console.log('close', e)
    },
    Error (e) {
      console.log('error', e)
    },
    Message (e) {
      console.log('message', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
    display: flex;
    height: 100vh;
    .main{
        margin: auto;
        width: 50rem;
        height: 535px;
        border: 1px solid black;
        .content{
            background-color: aliceblue;
            height: 70%;
        }
        .message{
            position: relative;
            background-color: antiquewhite;
            height: 30%;
            .el-input{
                width: 100%;
                height: 12.5rem;
            }
            button{
                position: absolute;
                bottom: 0px;
                right: 0px;
                height: 20px;
                width: 50px;
            }
        }
    }
}
</style>
